<script setup>
import {ref} from "vue";
import instance from "@/utils/request.js";
import {baseURL} from "@/utils/request.js";
import {useUserStore} from "@/store/modules/student/index.js";
import {onMounted} from "vue";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const userStore = useUserStore()
const formData = ref([])

const queryString = ref({
  //课程名
  courseName: '',
  //排序条件
  sortBy: null,
  //升序或降序
  //0降序 1升序
  ascendOrNot: null,
})
const pagination = ref({
  currentPage: 1,
  pageSize: 6,
  total: 8
})

const mockData = [
  {
    courseName: '高等数学',
    courseGrade: 4,
    courseTeacher: '张三',
    courseBegin: '2023-09-01',
    courseEnd: '2024-01-10',
    courseType: '必修课'
  },
  {
    courseName: '大学英语',
    courseGrade: 3,
    courseTeacher: '李四',
    courseBegin: '2023-09-01',
    courseEnd: '2024-01-10',
    courseType: '必修课'
  },
  {
    courseName: '线性代数',
    courseGrade: 3,
    courseTeacher: '王五',
    courseBegin: '2023-09-15',
    courseEnd: '2024-01-24',
    courseType: '必修课'
  },
  {
    courseName: '大学物理',
    courseGrade: 4,
    courseTeacher: '赵六',
    courseBegin: '2023-09-08',
    courseEnd: '2024-01-17',
    courseType: '必修课'
  },
  {
    courseName: '计算机基础',
    courseGrade: 2,
    courseTeacher: '钱七',
    courseBegin: '2023-09-22',
    courseEnd: '2024-01-31',
    courseType: '选修课'
  },
  {
    courseName: '数据结构',
    courseGrade: 3,
    courseTeacher: '孙八',
    courseBegin: '2023-09-29',
    courseEnd: '2024-02-07',
    courseType: '选修课'
  },
  {
    courseName: '操作系统',
    courseGrade: 3,
    courseTeacher: '周九',
    courseBegin: '2023-10-06',
    courseEnd: '2024-02-14',
    courseType: '选修课'
  },
  {
    courseName: '网络基础',
    courseGrade: 2,
    courseTeacher: '吴十',
    courseBegin: '2023-10-13',
    courseEnd: '2024-02-21',
    courseType: '选修课'
  }
];

//通过生命周期函数在vue对象创建时获取成绩信息
onMounted(() => {
  formData.value = mockData; // 初始化表格数据为模拟数据
  // 如果需要，可以在这里调用findPage()来获取服务器数据
});

//获取课程信息
const findPage = () => {

  const param = {

  }

  instance.post(baseURL + "/student/findPage", param).then(res => {
    formData.value = res.data.data.list
    pagination.value.total = res.data.data.totals
  }).catch((e) => {
    console.log(e)
  })
}
const handleCurrentChange = (currentPage) => {
  pagination.value.currentPage = currentPage;
  findPage();
}

const handleQuery = () => {
  try {
    handleCurrentChange(1)

    ElMessage.success('查询成功')
  }catch (e) {
    ElMessage.error('查询失败')
    console.log(e)
  }

}
</script>

<template>
  <div class="content-header">
    <el-input v-model="queryString.courseName" placeholder="请输入课程名称" clearable class="input-wrapper">
      <template #prefix>
        <el-icon>
          <Search/>
        </el-icon>
      </template>
    </el-input>
    <el-select v-model="queryString.sortBy" clearable placeholder="选择排序类型" class="select-wrapper" size="large">
      <el-option label="学分" value="course_credit"/>
      <el-option label="老师" value="course_teacher"/>
    </el-select>
    <el-select v-model="queryString.ascendOrNot" clearable placeholder="选择升序或降序" class="select-wrapper" size="large">
      <el-option label="升序" value="asc"/>
      <el-option label="降序" value="desc"/>
    </el-select>
    <el-button type="primary" @click="handleQuery" style="height: 50px;margin: 5px 0 0 10px" >
      确定
    </el-button>
  </div>

  <div class="content-table">
    <el-table :data="formData" class="test">
      <el-table-column prop="courseName" label="课程名称" width="150px"/>
      <el-table-column prop="courseGrade" label="学分" width="150px"/>
      <el-table-column prop="courseTeacher" label="授课老师" width="120px"/>
      <el-table-column prop="courseBegin" label="课程开始时间" width="180px"/>
      <el-table-column prop="courseEnd" label="课程结束时间" width="180px"/>
      <el-table-column prop="courseType" label="课程类型" width="180px"/>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination background
                     @current-change="handleCurrentChange"
                     v-model:current-page="pagination.currentPage"
                     v-model:page-size="pagination.pageSize"
                     :total="pagination.total"
                     layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<style scoped>

.content-header {
  margin: 10px;
  height: 60px;
  display: flex;
}
.input-wrapper{
  width: 240px;
  padding: 5px;
}

.content-table {
  height: 570px;
  margin: 10px;
}

.pagination-wrapper {
  display: flex;
  justify-content: right;
  padding-right: 500px;
  height: 100px;
}
.select-wrapper{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
</style>